<template>
	<view class="map-box">
		<!-- #ifdef H5 -->
		<view id="container" :style="pattern" class="tui-maps" ></view>
		<!-- #endif -->
		<!-- #ifdef MP -->
		<map class="tui-maps" id="map" :longitude="longitude" :latitude="latitude" :markers="markers" :enable-zoom="false" :enable-scroll="false" @tap="goMap"></map>
		<!-- #endif -->
	</view>
</template>

<script>
	import { jsAMap } from '@/static/js/jsAMap.js';
	export default {
		props: {
			longitude: {
				type: Number,
				default: 0
			},
			latitude: {
				type: Number,
				default: 0
			},
			companyName: {
				type: String,
				default: ''
			},
			address: {
				type: String,
				default: ''
			},
			pattern: {
				type: String,
				default: 'height: 600rpx;border-radius: 12rpx;'
				// default: 'width: 750rpx;height: 600rpx;border-radius: 12rpx;'
			}
		},
		data() {
			return {
				ak: '20685b399d9c4b1f5e85a223a0e8d4b2', // 20685b399d9c4b1f5e85a223a0e8d4b2
				markers: []
			}
		},
		watch: {
			latitude: {
				handler() {
					this.getInit()
				}
			}
		},
		mounted() {
			if (this.longitude) {
				this.getInit()
			}
		},
		methods: {
			// 微信小程序里面打开地图
			goMap(){
				uni.openLocation({
					latitude: this.latitude,
					longitude: this.longitude,
					name: this.companyName,
					address: this.address,
					success: function () {
						console.log('success');
					}
				});
			},
			getInit() {
				// #ifdef H5
				const that = this
				jsAMap(this.ak).then(AMap => {
					let map = new AMap.Map("container", {
						resizeEnable: true,
						zoom: 15,
						// mapStyle: "amap://styles/dark",
						zoomEnable:false,
						dragEnable: false,
						center: [that.longitude, that.latitude],
					});
					const marker = new AMap.Marker({
						icon: new AMap.Icon({
							image: "https://ebc-prod.cdn.benwunet.com/uni-static/location.png",
							size: new AMap.Size(28, 28), //图标所处区域大小
							imageSize: new AMap.Size(28, 28) //图标大小
						}),
						position: [that.longitude, that.latitude],
						offset: new AMap.Pixel(-13, -30)
					});
					map.add(marker);
				})
				// #endif
				// #ifdef MP
					this.markers = [{
					  id: 1111111, //标记点 id
					  width: 20,
					  height: 20,
					  longitude: this.longitude,
					  latitude: this.latitude,
					  iconPath:'https://ebc-prod.cdn.benwunet.com/uni-static/location.png'
					}]
				// #endif
			},
		}
	}
</script>

<style scoped lang="scss">
	.tui-maps {
		background-color: var(--controllerBgColor);
		height: 352rpx;
		z-index: 0;
		overflow: hidden;
	}
  @media (min-width: 780px) {
    .tui-maps {
      height: 704rpx;
    }
  }
  // #ifdef MP
    .tui-maps {
      width: 100%;
    }
  // #endif
  
</style>